<template>
	<view class="">
		<!--  -->
		<ben></ben>
		<!--  -->
		<view class="row min30 just_cont_spacebet font600 size28 col0">
			订单信息
			<view style="color: #FE3C3C;" v-if="order_status == 2">
				等待取货
			</view>
			<view style="color: #FE3C3C;" v-if="order_status == 3">
				已完成
			</view>
			<view style="color: #FE3C3C;" v-if="order_status == 4">
				已取消
			</view>
		</view>
		<view class="min30_rl background_f pad20 rad2">
			<view class="padbottom10 minbottom20 row" style="border-bottom: 2rpx solid #E1E1E1;"
				v-for="(item,index) in list" :key="index">
				<image :src="item.goods_cover" style="width: 20%;height: 100rpx;"></image>
				<view class="flex1 column size28 font500 minleft20" style="color: #808080;">
					{{ item.goods_name }}
					<view class="minto minbottom0 row just_cont_spacebet">
						规格：{{ item.specs_name }}
						<view class="">
							数量：{{ item.specs_num }}
						</view>
					</view>
				</view>
			</view>
			<view class="min10_rl row just_cont_spacebet size28 col0 font500">
				<view class="row align_item_c">
					订单积分：
					<view class="size32 font600" style="color: #DB3634;">
						{{ total }}
					</view>
				</view>
				<view class="row align_item_c">
					订单金额：
					<view class="size32 font600" style="color: #DB3634;">
						￥{{ total_price }}
					</view>
				</view>
			</view>
		</view>
		<view class="just_cont_spacebet row size26 col6 font500" style="margin: auto 60rpx;margin-top: 30rpx;">
			订单编号
			<view class="col3">
				{{ list[0].order_no }}
			</view>
		</view>
		<view class="just_cont_spacebet row size26 col6 font500" style="margin: auto 60rpx;margin-top: 20rpx;">
			收货人
			<view class="col3">
				{{ list[0].address_name }}
			</view>
		</view>
		<view class="just_cont_spacebet row size26 col6 font500" style="margin: auto 60rpx;margin-top: 20rpx;">
			联系电话
			<view class="col3">
				{{ list[0].address_phone }}
			</view>
		</view>
		<view class="just_cont_spacebet row size26 col6 font500" style="margin: auto 60rpx;margin-top: 20rpx;">
			下单时间
			<view class="col3">
				{{ create_time }}
			</view>
		</view>
		<!-- <view class="row min30 font600 size28 col0" v-if="list.status == 3">
			退款申请
		</view>
		<view class="min30_rl background_f rad2" v-if="list.status == 3">
			<view class="pad30" style="border-bottom: 2rpx solid #E1E1E1;">
				<view class="row size28 font500 col6">
					退款原因：
					<view class="col0 size28">
						{{ list.refund_reason.reason }}
					</view>
				</view>
				<view class="padtop20 row flexwrap">
					<view class="box " style="width: 30%;" v-for="(info,i) in list.refund_reason.img_url" :key="i">
						<image :src="info" class="rad2" style="width: 100%;height: 200rpx;"></image>
					</view>
				</view>
			</view>
			<view class="pad30 row size28 font500 col6">
				退款金额：
				<view class="col0 size28">
					{{ list.refund_reason.refund_money }}
				</view>
			</view>
		</view> -->
		<view class="row" style="padding: 50rpx 80rpx;" v-if="order_status == 4">
			<!-- <view class="flex1">
				<u-button text="驳回退款" shape="circle" plain="true" color="#FE9110" customStyle="color: #000;"
					hairline="true" size="normal"></u-button>
			</view> -->
			<view class="flex1 minleft30">
				<u-button text="同意取消" shape="circle" color="#FE9110" customStyle="color: #000;" hairline="true"
					size="normal" @click="getOrderCance"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				uid: '',
				user_id: '',
				create_time: '',
				total_price: '',
				order_status: '',
				integral: '',
				write: '',
				list: [],

			}
		},
		onLoad(op) {
			this.id = op.id
			this.uid = op.uid
			this.create_time = op.create_time
			this.total_price = op.total_price
			this.order_status = op.order_status
		},
		onShow() {
			//当前页面展示的时候他就执行该生命周期
			this.user_id = uni.getStorageSync('user_id');
			const token = uni.getStorageSync('token');
			// this.user_id = uni.getStorageSync('user_id');
			if (token) {
				//如果存在token
				this.getOrderinfo()
				this.getWrite()
				//按正常逻辑来讲 登录成功 我们是不是需要向服务器获取用户的信息？
				//那么我们一起来获取用户信息
			} else {

				uni.showToast({
					title: '您还未登录，正在前往登录',
					icon: 'none'
				})
				setTimeout(function() {
					uni.navigateTo({
						url: "/mypackage/user/login"
					})
				}, 1000)
			}
		},
		computed: {
			total() {
				let prices = 0;
				if (this.total_price && this.write) {
					console.log(this.integral);
					prices = this.total_price * this.write
					prices = prices / 100
				}
				return prices.toFixed(0)
			}
		},
		methods: {
			async getWrite() {
				let {
					code,
					message,
					data
				} = await this.$com.fetchGet("member/shop_write_ratio")
				if (code == 200) {
					this.write = parseFloat(data)
				} else {
					console.log(message);
				}
			},
			async getOrderinfo() {
				let {
					code,
					message,
					data
				} = await this.$com.fetchGet("member/order_info/" + this.id)
				if (code == 200) {
					this.list = data
				} else {
					console.log(message);
				}
			},
			async getOrderCance() {
				let {
					code,
					message,
					data
				} = await this.$com.fetch("shop/Consent_cance/" + this.user_id, {
					id: this.id,
					user_id: this.uid,
				})
				if (code == 200) {
					uni.showToast({
						title: '退款成功！',
						icon: 'success'
					})
					setTimeout(function() {
						uni.reLaunch({
							url: "/pages/store/index"
						})
					}, 1000)
				} else {
					console.log(message);
				}
			},
		}
	}
</script>

<style scoped lang="less">
	.box {
		margin-left: 20rpx;

		&:nth-child(3n + 1) {
			margin-left: 0;
		}
	}
</style>